<template>
  <div class="myHomo">
    <van-popup
      :value="homeShow"
      class="geRenZhongXin"
      position="left"
      style="background-color: rgb(248, 249, 249)"
      @click-overlay="add"
      get-container=".myHomo"
    >
      <div class="center">
        <router-link to="/userinfo">
          <van-cell center>
            <template #icon
              ><van-image
                round
                width="30px"
                height="30px"
                :src="userData.avatarUrl"
            /></template>
            <template #title>
              <span>{{userData.nickname||'立即登录'}}</span>
              <van-icon name="arrow" />
            </template>
            <template #right-icon><van-icon name="scan" /></template>
          </van-cell>
        </router-link>
        <div class="box">
          <van-cell title="我的消息" center is-link>
            <template #icon></template>
          </van-cell>
          <van-cell title="云贝中心" center is-link>
            <template #icon></template>
          </van-cell>
          <van-cell title="创作者中心" center is-link>
            <template #icon></template>
          </van-cell>
        </div>
        <div class="box">
          <van-cell value="音乐服务" />
          <van-cell title="我的消息" center is-link>
            <template #icon></template>
          </van-cell>
          <van-cell title="云贝中心" center is-link>
            <template #icon></template>
          </van-cell>
          <van-cell title="创作者中心" center is-link>
            <template #icon></template>
          </van-cell>
        </div>
        <div class="box">
          <van-cell value="其他" />
          <van-cell title="我的消息" center is-link>
            <template #icon></template>
          </van-cell>
          <van-cell title="设置" center is-link>
            <template #icon></template>
          </van-cell>
          <van-cell title="夜间模式" center>
            <template #icon></template>
            <template #right-icon
              ><van-switch
                v-model="checked"
                active-color="#ee0a24"
                inactive-color="#dcdee0"
                size="16px"
            /></template>
          </van-cell>
        </div>
        <div class="box">
          <van-cell title="我的订单" center is-link>
            <template #icon></template>
          </van-cell>
          <van-cell title="优惠劵" center is-link>
            <template #icon></template>
          </van-cell>
          <van-cell title="我的客服" center is-link>
            <template #icon></template>
          </van-cell>
          <van-cell title="分享网易云音乐" center is-link>
            <template #icon></template>
          </van-cell>
          <van-cell title="关于" center is-link>
            <template #icon></template>
          </van-cell>
        </div>
        <van-button type="default"  class="btn" @click="loginOut">退出登录/关闭</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {getUser,delUser,delSUser} from "../api/user"
export default {
  props: ["homeShow"],
  data() {
    return {
      checked: false, //夜间开关,
      userData:{},
      uid:null,
    };
  },
  methods: {
    add() {
      this.$parent.homeShowFun(this.homeShow);
      console.log("sfsfs");
    },
    loginOut(){
      delUser().then(data=>{
        console.log(data)
      })
      delSUser().then(data=>{
        console.log(data)
      })
      window.localStorage.setItem('uid','')
      window.localStorage.setItem('token','')
      this.$router.push({path:'/login'})
    }
  },
  created(){
    this.uid=window.localStorage.getItem('uid')  
  },
  watch:{
    uid(){
      getUser({
        uid:this.uid
      }).then((data)=>{
        if(data.code==200){
              console.log(data)
      this.userData=data.profile;
        }    
    })
    }
  }
};
</script>

<style lang="less">
.myHomo {
  position: relative;
}
.geRenZhongXin {
  //  height: '100%' }, {  'max-width': '750px' },{padding:'10px'},{backgroundColor:'rgb(248,249,249)'}]"
  height: 100%;
  width: 55%;
  padding: 1%;
  .vip {
    width: 100%;
    height: 150px;
    background-color: pink;
    border-radius: 10px;
  }
  .box {
    border-radius: 10px;
    overflow: hidden;
    margin: 15px 0;
  }
  .btn {
    background-color: #fff;
    border: none;
    width: 100%;
    padding: 10px 0;
    color: red;
  }
}
</style>